<template>
    <van-picker-group title="预约日期" :tabs="['选择日期', '选择时间']" next-step-text="下一步" @confirm="onConfirm" @cancel="onCancel">
        <van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" />
        <van-time-picker v-model="currentTime" />
    </van-picker-group>
</template>
<script>
import { ref } from 'vue';
import { showToast } from 'vant';
import dayjs from 'dayjs';

export default {
    name: "SelectDateTimeComponent",
    props: {
        defaultDate: {
            type: Array,
            default: () => [dayjs().format("YYYY"), dayjs().format("MM"), dayjs().format("DD")]
        },
        defaultTime: {
            type: Array,
            default: () => [dayjs().format("HH"), dayjs().format("mm")]
        }
    },
    emits: ["onOk", "onCancel"],
    setup(props, ctx) {
        const currentDate = ref(props.defaultDate);
        const currentTime = ref(props.defaultTime);

        const onConfirm = () => {
            ctx.emit("onOk", { value: `${currentDate.value.join('/')} ${currentTime.value.join(':')}` })
            // showToast(
            //     `${currentDate.value.join('/')} ${currentTime.value.join(':')}`
            // );
        };

        const onCancel = () => {
            // showToast('已取消');
            ctx.emit("onCancel", false)
        };

        return {
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 5, 1),
            currentDate,
            currentTime,
            onConfirm,
            onCancel,
        };
    },
};

</script>